@extends('admin.pop_edit')
@section('body')
    <style>
        #allmap {
            width: 100%;
            height: 500px;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <div class="layui-form-item" style="padding-top: 20px;">
        <div class="layui-inline">
            <label class="layui-form-label">@lang('common.address'):</label>
            <div class="layui-input-inline" style="width:250px">
                <input type="text" id="txtAddress" class="layui-input"
                       value="{{$address}}" placeholder="@lang('common.address')">
            </div>
        </div>
        <div class="layui-inline">&emsp;
            <a class="layui-btn icon-btn" id="btnSearch">
                <i class="iconfont icon-ic_search"></i>@lang('common.search')
            </a>
        </div>
    </div>
    <div id="allmap"></div>
    <input type="hidden" id="hiLng"/>
    <input type="hidden" id="hiLat"/>
    <input type="hidden" id="hiAddress"/>
@stop
@push('script')
    <script type="text/javascript" src="{{\Illuminate\Support\Facades\Request::getScheme()}}://api.map.baidu.com/api?v=2.0&ak={{config('app.baidu_ak')}}"></script>
    <script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map("allmap");
        // map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

        map.enableScrollWheelZoom(true);
        window.currentPoint = false;
        //单击获取点击的经纬度
        map.addEventListener("click", function (e) {
            showPoint(e.point);
        });

        function showPoint(point) {
            map.clearOverlays();
            var marker = new BMap.Marker(point);
            map.addOverlay(marker);
            layui.$("#hiLng").val(point.lng);
            layui.$("#hiLat").val(point.lat);
            var gc = new BMap.Geocoder();
            gc.getLocation(point, function (rs) {
                console.log(rs);
                var opts = {
                    title: "@lang('common.address')",
                    width: 220,
                    height: 62
                };
                layui.$("#hiAddress").val(rs.address);
                let addComp = rs.addressComponents;
                var infoStr = '<div>' + rs.address + '</div>';
                var infoWindow = new BMap.InfoWindow(infoStr, opts);
                console.log(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
                map.openInfoWindow(infoWindow, point);
            });
        }

        var local = new BMap.LocalSearch(map, {
            renderOptions: {map: map}
        });

        @if(empty($lng))
        map.centerAndZoom("重庆", 12);
        if (layui.$('#txtAddress').val().length) {
            local.search(layui.$('#txtAddress').val());
        }
        @else
        map.centerAndZoom(new BMap.Point({{$lng}}, {{$lat}}), 11);
        showPoint(new BMap.Point({{$lng}}, {{$lat}}));
        @endif
        layui.$('#btnSearch').click(function () {
            local.search(layui.$('#txtAddress').val());
        });
    </script>
@endpush
